# JS雜食-06--小實作-1: Star Calculator

第 12 屆 iThome 鐵人賽

DAY 28

Modern Web

有角拾系列第 28 篇

12th鐵人賽

Rocketgirl

團隊仙人掌技術村

2020-10-13 23:08:38

1118 瀏覽

分享至

參考資料1：MDN — the Mozilla Developer Network
參考資料2：0 陷阱！0 誤解！8 天重新認識 JavaScript！
參考資料3：[筆記][JavaScript]所謂的「停止事件」到底是怎麼一回事？
圖片來源(NASA開放非商用皆可自由取用）： NASA Image and Video Library
終端機效果參考來源：Retro Terminal Blog Style

用HTML+純JS試作一表單，規格：

兩個輸入框
一個提交按鈕
點擊按鈕時呈現兩個輸入數字之和

本篇實作CSS效果單純個人喜好，重點在JS語法的學習脈絡，故不會著墨CSS細節

前置作業

基本HTML, CSS知識
新增一資料夾至少包含以下三種檔案：index.html、style.css、main.js 到對應資料夾結構中，我想放到背景的照片也放入images資料夾中

images
|--nasa.jpg
scripts
|--main.js
styles
|--style.css
index.html

撰寫HTML (`index.html`)

數字需要透過輸入框寫入，而輸入框需要包覆在<form>tag之中；依序在<body>中填入<form>、2個<input>後，給予對應#id以便JS操作，這邊的<form> id命名為starCalculator，而2個<input>框id則分別命名為starNumber1、starNumber2
將欲引入的JS檔案放在</body>前，以避免HTML畫面還沒解析完JS就先運作，舉例：如果畫面還沒跑完，星星計算機就先計算(JS)，那麼等畫面(HTML+CSS)跑完使用者輸入數字後，這個畫面將沒辦法提供相加結果，因為JS早已運作過

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
  
  <script src="scripts/main.js"></script>
</body>

腳本載入策略(Script loading strategies)
若需要將內部JavaScript或外部JavaScript放在HTML的<head>區域，而非如同上述範例放在</body>前；內部JavaScript可使用"DOMContentLoaded"來解決，而外部則可以使用defer，例如：<script src="main.js" defer></script>，兩者不存在同時使用，詳情請參考連結。

撰寫JavaScript (`main.js`)

根據上面所撰寫的HTML檔案，接著以JS語法取得兩個想操控的<input>輸入框，取得id的方式是使用 querySelector

let starNumber1 = document.querySelector("#starNumber1");
let starNumber2 = document.querySelector("#starNumber2");

嚴格來說1.是透過DOM API來取得節點，常見有以下四種：
Selector選取器：回傳第一個NodeListdocument.querySelector('..xxx or #xxx or xxx')、回傳所有NodeListdocument.querySelectorAll('xxx')
tag：document.getElementByTagName('xxx')
classname：document.getElementByClassName('xxx')
id：document.getElementById('xxx')

設變數starNumberTotal，將兩個輸入框相加的結果存在其中
starNumberTotal = starNumber1 + starNumber2;，然而這時候打開瀏覽器console會發現相加結果NaN，於是反查starNumber1得知這時捕捉到的數字還是字串，所以可以透過瀏覽器檢查有哪些屬性，這邊我發現了valueAsNumber(下方還有另外兩種方法)

// 這樣寫瀏覽器就能把輸入的數字真正讀成數字並相加

let starNumberTotal = starNumber1.valueAsNumber + starNumber2.valueAsNumber;

// 用Number()，注意starNumber1&2 後面接的是value

let starNumberTotal = Number(starNumber1.value) + Number(starNumber2.value);

// 使用parseInt()，注意starNumber1&2 裡面接的是字串value

let starNumberTotal = parseInt(starNumber1.value) + parseInt(starNumber2.value);

想請瀏覽器在按下submit按鈕時，幫我們計算兩個input相加結果，所以我們要先用querySelectot找HTML<form>上的id，並且為"submit"加上事件監聽器addEventListener，其3個參數分別為：（1)submit事件,(2) 接著寫一匿名函數把前述第2點中的變數starNumberTotal放進來，如果這段相加變數不放進匿名函式，網頁載入(解析）尚未完成，JS算式就會先相加了，所以程式碼擺放位置也要注意；(3)設定false代表使用「捕獲」機制
下一步，在函式中加入簡單的alert來跳出相加結果
最後，幫匿名函式事件加上preventDefault

document.querySelector("#starCalculator").addEventListener(
  "submit",
  function (event) {
    let starNumberTotal = starNumber1.valueAsNumber + starNumber2.valueAsNumber;
    alert(starNumberTotal);
    event.preventDefault();
  },
  false
);